function Banner() {}

$.extend(Banner.prototype, {
    init: function() {
        this.slideCon = $(".slide-img-container");
        this.dots = $(".dot");
        this.slidesCon = $(".slides-container");
        this.prev = $(".navigation-container .show-prev");
        this.next = $(".navigation-container .show-next");

        this.count = 0;
        this.timer = null;

        this.slideCon.first().css({
            "z-index": "99",
            "opacity": "1",
            "background-image": 'url("http://dmall-mc.nosdn.127.net/轮胎炸蛋钥匙链1920x420.jpgbf7e2918-a26c-4cde-8700-ab6efca9360f")'
        });
        this.slideCon.eq(1).css({
            "z-index": "99",
            "opacity": "1",
            "background-image": 'url("http://dmall-mc.nosdn.127.net/马克杯banner1920_420-4.jpg650a0210-6b51-43a8-ba1c-69a083131c97")'
        });
        this.slideCon.last().css({
            "z-index": "99",
            "opacity": "1",
            "background-image": 'url("http://dmall-mc.nosdn.127.net/新世纪福音战士聚玩官网banner1920x420.jpg6052c59c-1a32-47b0-b3c0-800943f7d199")'
        });

        this.prev.on("click", this.buttonClick.bind(this));
        this.next.on("click", this.buttonClick.bind(this));
        this.slidesCon.on("mouseover", this.stopAutoMove.bind(this));
        this.slidesCon.on("mouseleave", this.autoMove.bind(this));
        $.each(this.dots, function(index, item) {
            $(item).on("mouseenter", this.dotChange.bind(this));
        }.bind(this));

        this.autoMove();
    },
    autoMove: function() {
        clearInterval(this.timer);
        this.timer = setInterval(function() {
            this.imgMove();

            this.count++;
            if (this.count > 2) this.count = 0;
        }.bind(this), 2000);
    },
    stopAutoMove: function() {
        clearInterval(this.timer);
    },
    imgMove: function() {
        $.each(this.slideCon, function(index, item) {
            item.style.opacity = 0;
        });
        $.each(this.dots, function(index, item) {
            item.className = "dot";
        });

        this.slideCon.eq(this.count).css({
            opacity: 1
        });
        this.dots.eq(this.count).addClass("active");
    },
    dotChange: function(evt) {
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        $.each(this.dots, function(index, item) {
            item.className = "dot";
        });

        $(target).addClass("active");
        this.count = [].slice.call(target.parentNode.children).indexOf(target);
        this.imgMove();
    },
    buttonClick: function(evt) {
        var e = evt || window.event;
        var target = e.target || e.srcElement;
        if (target.className === "show-prev") {
            this.count--;
            if (this.count < 0) this.count = 2;
        } else if (target.className === "show-next") {
            this.count++;
            if (this.count > 2) this.count = 0;
        }
        this.imgMove();
    }
})

export default new Banner();